<template>
	<nt-container bg-color="#fff">
		<nt-grid :data="entryList" @click="toPage"></nt-grid>
		<view class="nt-submit">
			<view class="nt-submit-item border pad_lr">
				<nt-title label="服务内容">
				</nt-title>
				<view class="nt-submit-item__procure serve">
					<view class="serve-box" @tap="orderInfo.repair_status=serveValue"
						:class="{ativeServe:serveValue==orderInfo.repair_status}"
						v-for="(serveLabel,serveValue) in formConfig.repairstatusList" :key="serveValue">
						{{serveLabel}}
					</view>
				</view>
			</view>
			<view class="nt-submit-item border pad_lr">
				<nt-title label="成本内容">
					<template #right>
						<view class="cost">总成本：{{finalCost || 0}}</view>
						<view class="switch">
							<view class="switch-text" :class="{ active: !isCost }">无</view>
							<u-switch v-model="isCost" size="20"></u-switch>
							<view class="switch-text" :class="{ active: isCost }">有</view>
						</view>
					</template>
				</nt-title>
			</view>
			<template v-if="isCost">
				<view class="nt-submit-item border pad">
					<view class="nt-submit-item__type">
						<view class="nt-submit-item__type--label">配件种类</view>
						<view class="nt-submit-item__type--list">
							<view class="nt-submit-item__type--item"
								:class="{ company: it.value == 1, self: it.value == 2, procure: it.value == 3 }"
								v-for="it in partsTypeList" :key="it.value" @tap="addParts(it.value)">{{it.label}}
							</view>
						</view>
					</view>
				</view>
				<view class="parts-list">
					<view class="parts-list__item" v-for="(it, index) in allPartsList" :key="index"
						:class="{ company: it.type == 1, self: it.type == 2, procure: it.type == 3 }">
						<view class="parts-list__item--content">
							<view class="parts-list__item--content-type" @tap="selectParts(it.type, index)">
								<!-- {{ it.type == 1 ? '公司配件' : it.type == 2 ? '采购配件' : '个人配件' }} -->
								{{
									it.name || (it.type == 1 ? '公司配件' : it.type == 2 ? '采购配件' : '个人配件')
								}}
								<text class="iconfont">&#xe6bb;</text>
							</view>
							<view class="parts-list__item--content-name" :class="{ empty: !it.name }">
								<!-- {{ it.name || '名称' }} -->
								<u--input v-model="it.customName" placeholder="名称" :readonly="it.type != 2"></u--input>
							</view>
							<view class="parts-list__item--content-number" :class="{ empty: !it.quantity }">
								<!-- {{ it.quantity || '数量' }} -->
								<u--input v-model="it.quantity" placeholder="数量"></u--input>
							</view>
							<view class="parts-list__item--content-price" :class="{ empty: !it.price }">
								<u--input v-model="it.price" placeholder="价格" :readonly="it.type != 2"></u--input>
							</view>
						</view>
						<view class="parts-list__item--btn" @tap="deleteParts(index)">-</view>
					</view>
				</view>
			</template>
			<view class="nt-submit-item border pad_lr" v-if="showProcureUpload">
				<nt-title label="上传采购图片">
					<template #right>
						<view class="tip">每张图片大小不能超过1M</view>
					</template>
				</nt-title>
				<div class="nt-submit-item__procure">
					<nt-upload :max-count="100" @success="procureImage = $event"
						:images="orderInfo.purchase_images"></nt-upload>
				</div>
			</view>

			<view class="gap"></view>
			<view class="nt-submit-item border pad_lr">
				<nt-title label="带回配件">
					<template #right>
						<span class="clear-btn" @tap="showClearTip = true">清空</span>
						<view class="switch">
							<view class="switch-text" :class="{ active: !isBack }">无</view>
							<u-switch v-model="isBack" size="20"></u-switch>
							<view class="switch-text" :class="{ active: isBack }">有</view>
						</view>
					</template>
				</nt-title>
			</view>

			<view class="back-list" v-if="isBack">
				<view class="back-list__item">
					<view class="back-list__item--type weight">配件类型</view>
					<view class="back-list__item--name weight">配件名称</view>
					<view class="back-list__item--number weight">配件数量</view>
					<view class="back-list__item--price weight">配件金额</view>
					<view class="back-list__item--btn weight"></view>
				</view>
				<view class="back-list__item" v-for="(it, index) in backPartsList" :key="index">
					<view class="back-list__item--type" @tap="selectBackParts(index)">
						{{ it.name || "请选择" }} <text class="iconfont">&#xe6bb;</text>
					</view>
					<view class="back-list__item--name">
						<!-- {{ it.customName || "名称" }} -->
						<u--input v-model="it.customName" placeholder="名称" inputAlign="center"></u--input>
					</view>
					<view class="back-list__item--number">
						<u--input v-model="it.quantity" placeholder="数量" inputAlign="center"></u--input>
					</view>
					<view class="back-list__item--price">
						<u--input v-model="it.price" placeholder="价格" inputAlign="center"></u--input>
					</view>
					<view class="back-list__item--btn">
						<view class="back-list__item--btn-b" @tap="addBackParts(index)" v-if="index == 0">+</view>
						<view class="back-list__item--btn-r" @tap="deleteBackParts(index)" v-else>-</view>
					</view>
				</view>
			</view>


			<view class="gap"></view>
			<view class="nt-submit-item border pad_lr">
				<nt-title label="发票信息">
					<template #right>
						<view class="switch">
							<view class="switch-text" :class="{ active: !isInvoice }">无</view>
							<u-switch v-model="isInvoice" size="20"></u-switch>
							<view class="switch-text" :class="{ active: isInvoice }">有</view>
						</view>
					</template>
				</nt-title>
			</view>
			<view class="nt-submit-item pad" v-if="isInvoice">
				<view class="nt-submit-item__invoice flex" @tap="selectHistoryInvoice"
					v-if="formConfig.invoiceHistoryList && formConfig.invoiceHistoryList.length">
					<view class="nt-submit-item__invoice--label">发票历史</view>
					<view class="nt-submit-item__invoice--desc">
						可选择历史发票
						<text class="iconfont">&#xe622;</text>
					</view>
				</view>
				<view class="nt-submit-item__invoice">
					<view class="nt-submit-item__invoice--label"><text>*</text>发票内容</view>
					<view class="nt-submit-item__invoice--input">
						<u--textarea :border="false" placeholder="请输入发票内容" v-model="invoiceInfo.remarks" maxlength="-1"
							:confirmType="null"></u--textarea>
					</view>
				</view>
				<view class="nt-submit-item__invoice flex">
					<view class="nt-submit-item__invoice--label width_150">
						<text>*</text>
						开票金额
					</view>
					<view class="nt-submit-item__invoice--input no-margin">
						<u--input placeholder="请输入开票金额" :border="false" v-model="invoiceInfo.price"></u--input>
					</view>
				</view>
				<view class="nt-submit-item__invoice flex">
					<view class="nt-submit-item__invoice--label width_150">
						发票税费
					</view>
					<view class="nt-submit-item__invoice--input no-margin">
						<u--input :placeholder="`开票金额*${formConfig.tax || 0}=税费`" :border="false" readonly
							v-model="tax"></u--input>
					</view>
				</view>
			</view>
			<view class="gap"></view>
			<view class="nt-submit-item border pad_lr">
				<nt-title label="好评">
					<template #right>
						<view class="switch">
							<view class="switch-text" :class="{ active: !isHp }">无</view>
							<u-switch v-model="isHp" size="20"></u-switch>
							<view class="switch-text" :class="{ active: isHp }">有</view>
							<u-icon @click="addPraise" color="#2D7FFD" v-if="isHp" size="20"
								name="plus-circle-fill"></u-icon>
						</view>
					</template>
				</nt-title>
			</view>
			<template v-if="isHp">
				<template v-for="(item,index) in orderInfo.praise_list">
					<view class="nt-submit-item pad praise">
						<!-- 好评平台 -->
						<view class="">
							<view class="platform-title">
								好评平台
							</view>
							<view class="flex">
								<view :class="{ platformActive: item.platform === it}" class="platform-type"
									v-for="it in formConfig.praisePlatformList" :key="it.value"
									@tap="selectPlatform(item,it)">
									{{ it}}
								</view>
							</view>
						</view>
						<view class="nt-submit-item__evaluate" style="margin-top: 20rpx;">
							<view class="platform-title">
								好评类型
							</view>
							<view class="nt-submit-item__evaluate--list flex">
								<!-- active -->
								<view class="nt-submit-item__evaluate--item"
									:class="{ active: item.praise_type == it.value }"
									v-for="it in formConfig.praiseTypeList" :key="it.value"
									@tap="selectParise(item,it.value)">
									<view class="nt-submit-item__evaluate--item-title">{{ it.name }}</view>
									<view class="nt-submit-item__evaluate--item-desc">{{ it.description }}</view>
								</view>
							</view>
						</view>
						<u-icon class="praise-delete" size="20" name="minus-circle-fill" color="#2D7FFD" v-if="index!=0"
							@click="deletePraise(index)"></u-icon>
					</view>

					<view class="nt-submit-item pad">
						<view class="nt-submit-item__upload">
							<view class="nt-submit-item__upload--title">
								上传好评截图 <text>（申请奖励）</text>
							</view>
							<view class="nt-submit-item__upload--btn">
								<nt-upload @success="uploadImage($event,item)" :maxCount="1"
									:images="item.images_list"></nt-upload>
							</view>
						</view>
					</view>
				</template>
			</template>

			<view class="gap"></view>
			<view class="nt-submit-item border pad_lr">
				<nt-title label="上传广告图">
				</nt-title>
				<template>
					<nt-upload @success="ggUpload" :maxCount="1" :images="echoAdvImage"></nt-upload>
					<view class="nt-submit-item__content" style="padding-bottom: 20rpx;">
						<u--textarea v-model="ggRemarks" placeholder="请输入广告图备注" maxlength="-1"
							:confirmType="null"></u--textarea>
					</view>
				</template>
			</view>
			<view class="gap"></view>
			<view class="nt-submit-item border pad_lr">
				<nt-title label="其他"></nt-title>
			</view>
			<view class="nt-submit-item border pad pad_tb">
				<view class="nt-submit-item__label" style="margin-bottom: 20rpx;">保修日期</view>
				<view class="nt-submit-item__content">
					<u--textarea v-model="selectDate" placeholder="请输入保修内容" ref="textarea" maxlength="-1"
						:confirmType="null"></u--textarea>
					<!-- <view class="nt-submit-item__content--select" @tap="show = true" >
						{{ selectDate || '点击选择' }}
						<text class="iconfont">&#xe6bb;</text>
					</view> -->
				</view>
			</view>
			<view class="nt-submit-item border pad flex">
				<view class="nt-submit-item__label required">客户标签</view>
				<view class="nt-submit-item__content">
					<view class="nt-submit-item__content--radio">
						<u-radio-group v-model="customType">
							<u-radio :label="it.name" :name="it.value" v-for="it in formConfig.usertagTypeList"
								:key="it.value"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>

			<view class="nt-submit-footer">
				<nt-button text="保存录入详情" @click="submit"></nt-button>
			</view>
		</view>
		<u-datetime-picker :show="show" mode="date" visibleItemCount="6" :minDate="minDate" :formatter="formatter"
			title="保修期" @confirm="confirm" @close="show = false" @cancel="show = false"
			closeOnClickOverlay></u-datetime-picker>
		<u-picker :show="showParts" ref="uPicker" :columns="columns" keyName="name" @confirm="confrimParts"
			@close="showParts = false" @cancel="showParts = false" closeOnClickOverlay></u-picker>
		<u-picker :show="showProcureParts" ref="uPicker" :columns="procureColumns" keyName="name"
			@confirm="confrimParts" @close="showProcureParts = false" @cancel="showProcureParts = false"
			@change="changeHandler" closeOnClickOverlay></u-picker>
		<u-picker :show="showBackParts" ref="backPartsRef" :columns="[formConfig.takebackTypeList]" keyName="name"
			@confirm="confrimBackParts" @close="showBackParts = false" @cancel="showBackParts = false"
			closeOnClickOverlay></u-picker>
		<nt-order-more :show="showMore" @close="showMore = $event" :auth="orderInfo.powerStatus" :id="orderInfo.id"
			:is_submit="orderInfo.is_submit"></nt-order-more>
		<u-picker :show="showInvoice" :columns="[formConfig.invoiceHistoryList]" keyName="name"
			@cancel="showInvoice = false" @confirm="confirmInvoice" @close="showInvoice = false"
			closeOnClickOverlay></u-picker>
		<u-modal :show="showAdvTip" title="上传广告图" content='请上传广告图或填写广告图备注' @confirm="showAdvTip = false"></u-modal>
		<!-- 清空带回配件 -->
		<u-modal :show="showClearTip" title="操作提示" content='确定清空录入的带回配件吗' showCancelButton
			@cancel="showClearTip = false" @confirm="clearBackParts"></u-modal>
	</nt-container>
</template>

<script>
	import Mixins from "./mixins"
	export default {
		mixins: [Mixins],
		data() {
			return {}
		},
		onLoad(options) {
			this.orderId = options.id
			this.init()
		},
		methods: {
			addPraise() {
				this.orderInfo.praise_list.push({
					platform: '大众',
					images: [],
					praise_type: ''
				})
			},
			deletePraise(i) {
				this.orderInfo.praise_list.splice(i, 1)
			},
			selectParise(item, value) {
				item.praise_type = value
				this.$forceUpdate()
			},
			selectPlatform(item, value) {
				item.platform = value
				this.$forceUpdate()
			},

			uploadImage(e, item) {
				item.images_list = e.map(o => o.url)
			},
		}
	}
</script>


<style lang="scss" scoped>
	@import "./submit.scss";

	.praise {
		padding-top: 50rpx !important;
		position: relative;

		&-delete {
			position: absolute;
			right: 25rpx;
			top: 5rpx;
		}
	}

	.platform {
		&-title {
			margin-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			
		}

		&-type {
			font-size: 28rpx;
			flex: 1 0 0;
			text-align: center;
			line-height: 50rpx;
			border: 0.5px solid #CCCCCC;
			border-radius: 25rpx;

			&:nth-child(2) {
				margin: 0 20rpx;
			}

		}

	}

	.platformActive {
		color: #fff;
		background: var(--theme-color);
		color: #fff;
	}

	.nt-submit-item__content {
		/deep/ .u-border {
			border: none;
		}

		/deep/ .u-textarea {
			background: #f9f9f9;
		}
	}

	.serve {
		display: flex;
		line-height: 80rpx;
		margin-bottom: 20rpx;

		&-box {
			margin: 0 20rpx;
			flex: 1;
			text-align: center;
			border: 0.5px solid rgb(192, 196, 204);
		}

		.ativeServe {
			border-color: var(--theme-color);
			background: var(--theme-color);
			color: #fff
		}
	}
</style>